<template>
	<view class="Login white por">
		<view class="por logbox">
			<image src="../../static/login/login.png" class=" logpic"></image>
			<view class="color-white f24 poa logtxt text--center">{{i18n.hyjr}}</view>
		</view>
		<view class="f12 white text--center lang">
			<text class=" block text--center borders boxs py6" :class="{ choice: choice == true }" @click="choice = !choice">{{ Value }}</text>
			<view class="langer borders boxs" :class="{ choices: choice == true }" v-if="choice">
				<text v-for="(item, index) in LangArray" :key="index" @click="Tab(index)" class="block">{{ item.name }}</text>
			</view>
		</view>
		<view class="w564 pb30 f14">
			<view class="bg-theme text--center wp100 bor5 py11 border1" @click="pushPage('/pages/login/establish')">{{ i18n.cjqb }}</view>
			<view class="text--center color-gray mt4">{{i18n.dycsy}}</view>
			<view class="bg-trans text--center color-theme wp100 bor5 py11 border1 wp100 mt30" @click="pushPage('/pages/login/import')">{{ i18n.drqb }}</view>
			<view class="text--center color-gray mt4">{{i18n.yyyqb}}</view>
		</view>
		<view class="mark" v-if="mark">
			<view class="tips">
				<view class="f18 white pt40 text--center px15 auto block my15">
					<text>{{ i18n.fxxbb }}</text>
				</view>
				<view class="f16 hui wp80 auto">
					<text>{{ i18n.zxbb }}V{{ bedVersion.number }}</text>
					<view class="" v-html="bedVersion.remarks"></view>
				</view>
				<view class="btn-blue mt30 auto block mb30">
					<text @click="ToWeb(bedVersion.url)">{{ i18n.ljgx }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			LangArray: [
				
				{
					name: '中文',
					value: 'cn',
					langName:'zh-Hans'
				},
				{
					name: 'English',
					value: 'en',
					langName:'en_US'
				}
			],
			choice: false,
			Value: '中文',
			mark: false,
			type: '',
			bedVersion: ''
		};
	},
	computed: {
		i18n() {
			return this.$t('login');
		}
	},
	onLoad() {
		// #ifdef APP-PLUS
		this.type = plus.os.name;
		// this.GetVersion();
		// #endif
		uni.getStorageSync('language') == 'en_US' ? (this.Value = 'English') : (this.Value = '中文');
	},
	methods: {
		Tab(index) {
			this.Value = this.LangArray[index].name;
			this.choice = false;
			this._i18n.locale = this.LangArray[index].langName;
			uni.setStorage({
				key: 'language',
				data: this.LangArray[index].langName
			});
		},
		async GetVersion() {
			let params = {
				type: this.type === 'iOS' ? 1 : 0
			};
			let { data } = await this.$http.post('login.getAppVersion', params, { isAuth: false, tipConfig: { isLoading: true } });
			this.bedVersion = data.bedVersion;
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				if (wgtinfo.version != data.bedVersion.number) {
					this.mark = true;
				} else {
					this.mark = false;
					if (uni.getStorageSync('token')) {
						uni.switchTab({
							url: '../index/index'
						});
					}
				}
			});
		},
		ToWeb(e) {
			plus.runtime.openURL(e);
		},
	}
};
</script>

<style lang="less">
.Login {
	width: 100%;
	min-height: 100vh;
	.logbox{
		width: 100%;
		height: 984rpx;
	}
	.logtxt{
		width: 100%;
		bottom: 200rpx;
	}
	.logpic{
		width: 100%;
		height: 984rpx;
	}
}
.lang {
	position: fixed;
	right: 30rpx;
	top: 100rpx;
}
.langer {
	position: absolute;
	right: 0;
	top: 97%;
	line-height: 48rpx;
}
.borders {
	border: 1rpx solid rgba(151, 151, 151, 0.6);
	border-radius: 4rpx;
}
.choice {
	border-bottom: none !important;
}
.choices {
	border-top: none !important;
}
.boxs {
	width: 160rpx;
}
.f27 {
	font-size: 56rpx;
}
.w564 {
	width: 564rpx;
	margin: 70rpx auto 0;
}
.tips {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 612rpx;
	// height: 586rpx;
	background: #222939;
	border-radius: 16rpx;
	image {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 48rpx;
		height: 48rpx;
		display: block;
	}
}
</style>
